/* eslint-disable no-unused-vars */
import './find.css';
import ajax from '../../js/ajax';
let all = document.querySelector('.all');
let footer = document.querySelector('footer');
let space = 16; //空隙
//const baseUrl='https://service-dmsf9bxc-1251395798.gz.apigw.tencentcs.com/release'
const baseUrl = 'http://127.0.0.1:7001';
let data = [];
ajax({
    baseUrl,
    url: '/api/web/carouselGroup/get',
    method: 'GET',
    data: { carouselGroupId: 14, projectId: 16 },
    headers: { 'Content-Type': 'application/json; charset=UTF-8' },
})
    .then((res) => {
        let arr = res.data.w_carousels;
        let i = 0;
        arr.forEach((o) => data.push(o.url));
    })
    .catch((err) => {
        console.log(err);
    });
ajax({
    baseUrl,
    url: '/api/web/carouselGroup/get',
    method: 'GET',
    data: { carouselGroupId: 10, projectId: 16 },
    headers: { 'Content-Type': 'application/json; charset=UTF-8' },
})
    .then((res) => {
        let arr = res.data.w_carousels;
        let i = 0;
        arr.forEach((o) => data.push(o.url));
        function render(start, end) {
            // todo渲染数据
            for (i = start; i < end; i++) {
                let box = document.createElement('div');
                box.className = 'box';
                all.appendChild(box);
                let img = document.createElement('img');
                img.src = data[i];
                box.appendChild(img);
            }
        }
        render(0, 12);
        window.onload = waterfall;
        window.onresize = waterfall;
        function waterfall() {
            //todo瀑布流
            let boxList = document.querySelectorAll('.box');
            const boxWidth = boxList[0].offsetWidth + space;
            const colCount = Math.floor(all.clientWidth / boxWidth);
            // eslint-disable-next-line no-const-assign
            if (colCount < 3) colCount = 3;
            let heightArr = new Array(colCount).fill(0);
            let minH, h, maxH;
            boxList.forEach((el) => {
                h = el.offsetHeight;
                minH = heightArr.toSorted((a, b) => a - b)[0];
                maxH = heightArr.toSorted((a, b) => a - b)[colCount - 1];
                const minIndex = heightArr.indexOf(minH);
                el.style.cssText = `
                position: absolute;
                top: ${minH}px;
                left: ${boxWidth * minIndex}px;
                `;
                heightArr[minIndex] += h + space;
            });
            footer.style.cssText = `
                position: absolute;
                top: ${maxH + h + 140 + 8}px;
            `;
        }
        window.addEventListener('scroll', () => {
            //todo触底加载
            if (
                document.documentElement.scrollHeight <=
                document.documentElement.clientHeight +
                    document.documentElement.scrollTop +
                    100
            ) {
                if (i < 29) {
                    render(i, i + 4);
                }
            }
            waterfall();
        });
    })
    .catch((err) => {
        console.log(err);
    });
